<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <head>
        <title>HLS Video Player</title>
    </head>

<body style="background-color: rgb(199, 195, 195);">
    <video id="video" controls width="100%"></video>

    <div>
        <input type="text" id="myInput" placeholder="请输入名称">
        <button onclick="OnPlay()">播放</button>
    </div>



    <div id="text-container">
        <!-- 文本内容将被插入到这里 -->
    </div>

    <script src="hls.js"></script>
    <script>
        console.log(window.location.hostname + window.location.port);


        //获取文件内容
        document.addEventListener('DOMContentLoaded', function () {
            fetch('./m3u8/name.txt')
                .then(response => response.text())
                .then(text => {
                    document.getElementById('text-container').innerText = text;
                })
                .catch(error => {
                    console.error('Error loading text file:', error);
                    document.getElementById('text-container').innerText = 'Error loading text file';
                });
        });


        function OnPlay() {
            var inputValue = document.getElementById('myInput').value;

            var video = document.getElementById('video');
            var hls = new Hls();


            console.log("http://" + window.location.hostname + ":" + window.location.port + "/m3u8/" + inputValue + "/index.m3u8/index.m3u8");
            hls.loadSource("http://" + window.location.hostname + ":" + window.location.port + "/m3u8/" + inputValue + "/index.m3u8/index.m3u8");
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });

        }
    </script>




</body>

</html>